<!--
 * new page
 * @author: zhuangming
 * @since: 2025-03-04
 * detail.vue
-->
<template>
  <view class="container">
    <image class="detail-header" :src="imgurl + detailData.merBanner"></image>
    <view class="detail-content">
      <!-- <view class="detail-title">
        {{ detailData.name }}
      </view> -->
      <view style="display: flex; align-items: center; justify-content: space-between;width: 100%;">
        <view style="display: flex; flex-direction: column; align-items: flex-start;width: 100%">
          <!-- <span style="font-size: 20rpx; background-color: rgba(255, 220, 220, 0.6); color: orange; border: 1rpx solid orange; padding: 1px; margin: 10px 0">{{ detailData.illustrate }}</span> -->
          <view style="display: flex;align-items: center;justify-content: space-between;width: 100%">
            <span style="font-size: 28rpx; color: orange">￥{{ detailData.couponPrice }}</span>
            <view v-if="infoType != 1" style="color: #999999; font-size: 22rpx">  </view></view
          >
          <span style="margin: 10px 0"> {{ detailData.couponName }} </span>
          <span style="font-size: 24rpx; margin-bottom: 10rpx"> {{ detailData.activeName }}</span>
        </view>
        <view> </view>
      </view>
      <van-divider />
      <view class="title mgb-1 color01 font-s14 font-medium">适用门店</view>
      <lifeInfo :infoType="2" :infoData="detailData" />
    </view>
    <view
      class="bgf pdtb-2 border-radius"
      v-for="(item, index) of productLists"
      :key="index"
      style="
        padding: 15px;
        border-radius: 12px;
        background-color: #fff;
        width: 85%;
        margin: 10px auto;
        margin-bottom: 10px;
        border-radius: 20rpx;
        background-color: #fff;
        display: flex;
        align-items: center;
        justify-content: space-between;
      "
    >
      <view style="width: 70%">
        <view class="fl color08 font-s16 base-ellipsis" style="max-width: 80%">
          {{ item.name }}
        </view>
        <view v-if="infoType != 1" style="font-size: 24rpx;color: #999999;" > (数量x{{ item.unmber }}) </view>
      </view>
      <view v-if="infoType != 1" class="color08 font-s16"> ￥{{ item.price }} </view>
      <view v-else class="color08 font-s16"> ￥{{ detailData.activeprice }} </view>
    </view>
    <view v-if="detailData.showInfo" style="padding: 15px; border-radius: 12px; width: 85%; margin: 10px auto; margin-bottom: 10px; border-radius: 20rpx;background-color: #fff;">
      <p  style="margin-bottom: 10px;">图文详情</p>
      <img  style="height: 570rpx;border-radius: 10rpx;" :src="imgurl + detailData.showInfo" alt="" />
    </view>
    <view style="padding-bottom: 100px"> </view>
    <view style="position: fixed; bottom: 0; width: 100%; left: 0; height: 82px; background-color: #fff; display: flex; align-items: center">
      <button
        @click="onGrab"
        :loading="loading"
        style="background-color: #FA642F; width: 90%; height: 40px; border-radius: 10px; color: white; border-radius: 20px; display: flex; align-items: center; justify-content: center"
      >
        立即抢购
      </button>
    </view>
    <subOrder ref="subOrder" :subOrderData="subOrderData" :ebMerActivityTicketId="checked" :ebMerActivityId="activeId" />
  </view>
</template>

<script>
import { selectTicketById, selectProductByTicketid } from "../../utils/api/local";

import subOrder from "../index/components/subOrder.vue";
import lifeInfo from "./components/list_info.vue";
import { IMG_URL } from "../../config/index";
export default {
  components: {
    subOrder,
    lifeInfo,
  },
  data() {
    return {
      productLists: [],
      infoType: "",
      imgurl: IMG_URL,
      tabs: "活动",
      id: "",
      detailData: {},
      activeData: [],
      checked: 1,
      activeList: [],
      /** 商户id */
      businessId: "",
      loading: false,
      /** 提交订单页面信息 */
      subOrderData: {},
      /** 活动id */
      activeId: "",
      /** 评价列表 */
      praiseList: [],
      params: {
        limit: 5,
        page: 1,
      },
      /** 数据是否加载完全 */
      hasMore: true,
      /** type为1表示进入店铺 */
      type: 0,
    };
  },
  onLoad(option) {
    this.id = option.id;
    this.infoType = option.infoType;
    this.activeId = option.activeId;
    this.selectProductByTicketid(option.id);
  },
  methods: {
    selectProductByTicketid(id) {
      selectProductByTicketid({ id }).then((res) => {
        this.productLists = res.data.ebMerActivityTicketProductList || [];
        this.detailData = {
          ...res.data.ebMer,
          couponName: res.data.ebMerActivityTicket.name,
          activeName: res.data.ebMerActivity.name,
          couponPrice: res.data.ebMerActivityTicket.price,
          couponNumber: res.data.ebMerActivityTicket.number,
          activeprice: res.data.ebMerActivityTicket.price,
          showInfo: res.data.ebMerActivityTicket.graphicInfo,
          merBanner: res.data.ebMerActivityTicket.icon,
        };
      });
    },
    /** 立即抢购 */
    onGrab() {
      this.loading = true;
      selectTicketById({ id: this.id }).then((res) => {
        this.loading = false;
        this.subOrderData = res.data || {};
        this.subOrderData.activeName = this.detailData.name;
        this.subOrderData.merAvatar = this.detailData.merAvatar;
        this.$refs.subOrder.handleOpen(this.id);
      });
    },
  },
};
</script>

<style scoped>
.container {
  width: 100%;
  height: 100vh;
  position: relative;
}
.detail-header {
  height: 500rpx;
  width: 100%;
  z-index: -1;
}
.detail-content {
  padding: 15px;
  border-radius: 12px;
  background-color: #fff;
  width: 85%;
  margin: 0 auto;
  margin-top: -30px;
  z-index: 10;
  position: relative; /* 添加 position 属性 */
}
</style>
